<script setup>
import "../iconfont/HomePage/Settings/iconfont.css"
import "../iconfont/HomePage/Workstation/iconfont.css"
</script>

<template>
  <!--  导航栏-->
  <div ref="NavBar" class="NavBar">

    <!--      网页的帅气的名字-->
    <div style="margin-top: 10px;margin-left: 20px;">
      <span class="NavBar-Name">WebFlowCraft</span>
    </div>
    <!--      工作台-->
    <div ref="NavBar-Workstation" class="NavBar-Workstation finger">
      <i class="iconfont icon-gongzuotai" style="font-size: 24px;"></i>
      <span style="">工作台</span>
    </div>

    <!--      头像-->
    <div ref="NavBar-Avatar" class="NavBar-Avatar finger">

    </div>


  </div>

  <!--  多项功能-->
  <div class="MainContent">

    <!--    我的页面-->
    <div ref="MainContent-MyPage" class="MainContent-MyPage">
      <div style="display: flex">
       <div class="MainContent-MyPage-Title">
         我的页面
       </div>
      <i class="iconfont icon-shezhi finger" style="font-size: 24px;font-weight: 400; margin-top: 20px;margin-left: 5px"></i>
    </div>
    </div>

  </div>

</template>

<style scoped>
.NavBar {
  top: 0;
  display: flex;
  text-align: center;
  position: absolute;
  width: 99%;
  height: 60px;
  border: 1px rgb(233, 234, 236) solid;
  border-radius: 8px;
  box-shadow: 0px 0px 5px rgb(233, 234, 236);
  background-color: white;
}

.NavBar-Name {
  color: #165DFF;
  font-size: 24px;
}

.NavBar-Workstation {
  margin-left: 150px;
  display: flex;
  width: 100px;
  margin-top: 18px;
}

.NavBar-Avatar {
  width: 24px;
  height: 24px;
  background-color: #222222;
  margin-top: 18px;
  margin-left: 1180px;
}

.MainContent{
  display: flex;
  width: 100%;
  background-color: rgb(245, 246, 248);
  height: 850px;
}

.MainContent-MyPage {
  margin-top: 100px;
  margin-left: 50px;
  width: 1585px;
  height: 200px;
  background-color: white;
  border: 1px rgb(233, 234, 236) solid;
  border-radius: 8px;
}
.MainContent-MyPage-Title{
  margin-top: 20px;
  margin-left: 20px;
  color: rgb(20, 30, 49);
  font-weight: 700;
}

.finger {
  cursor: pointer;
}

</style>